<template>
  <section>
    <el-form class="toolbar" label-width="100px" style="margin-top:10px;padding-top:20px;">
      <el-row>
        <el-col :span="6">
            <el-form-item label="账号">
            <el-input v-model="account"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="6">
            <el-form-item label="qq">
            <el-input v-model="qq"></el-input>
            </el-form-item>
        </el-col>
		<el-col :span="6">
            <el-form-item label="微信">
            <el-input v-model="wx"></el-input>
            </el-form-item>
        </el-col>
		<el-col :span="6">
            <el-form-item label="邀请人账号">
            <el-input v-model="inviteAccount"></el-input>
            </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="偏远预警">
            <el-select style="width:100%" v-model="farPlace" placeholder="请选择">
              <el-option label="1%" value="1"></el-option>
              <el-option label="2%" value="2"></el-option>
			  <el-option label="2%" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" @click="shousuo">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <el-table highlight-current-row :data="dataList" style="width: 100%;">
      <el-table-column align="center" prop="webSiteName" label="分站名称"></el-table-column>
      <el-table-column align="center" prop="account" label="账号"></el-table-column>
      <el-table-column align="center" prop="farPlace" label="偏远预警"></el-table-column>
	  <el-table-column align="center" prop="inviteCode" label="邀请人账号"></el-table-column>
	  <el-table-column align="center" prop="qq" label="qq"></el-table-column>
	  <el-table-column align="center" prop="wx" label="微信"></el-table-column>
      <!-- <el-table-column align="center" label="提现金额">
        <template slot-scope="scope">{{scope.row.money/100}} 元</template>
      </el-table-column> -->
    
      
    </el-table>

    <div style="padding:20px;text-align:center;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      total: 0,
      page: 1,
      size: 10,
      dataList: [],
      account: "",
      qq: "",
	  wx: "",
	  inviteAccount:'',
	  farPlace:''
    };
  },
  methods: {
    shousuo: function() {
      let that = this;
      this.axios({
        method: "GET",
        headers: {
          "Authorization": sessionStorage.getItem("token"),
          "Content-Type": "application/x-www-form-urlencoded",
          "domain": "taobao.tianyalei.com"
        },
        url:
          "/user?page=" +
          (that.page - 1) +
          "&size=" +
          that.size +
          "&account=" +
          that.account +
          "&qq=" +
          that.qq +
          "&wx=" +
          that.wx +
          "&inviteAccount=" +
		  that.inviteAccount+
		  "&farPlace="+
		  that.farPlace
      }).then(function(response) {
        if (response.data.code == 200) {
          that.dataList = response.data.data.list;
          that.total = response.data.data.totalCount;
        }
      });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.size = val;
      this.shousuo();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.page = val;
      this.shousuo();
		},
  },

  created() {
    this.shousuo();
  }
};
</script>